<script setup lang="js">
import { onMounted, reactive, ref,markRaw, defineAsyncComponent } from 'vue'
const Index = defineAsyncComponent(() => import('./pages/Index.vue'))
import { setItem, getItem, getRandomIntInRange, getIPInfo } from './utils'
import {  NIcon } from 'naive-ui'
const page = reactive({
  component: markRaw(Index),
})

onMounted(() => {
  console.log('content vue')

  // 读取数据
  getItem('kkhide').then((value) => {
    if (value) {
      hide.value = value
    }
  })
})

const hide = ref(false)
const hideHandle = () => {
  hide.value = !hide.value
  setItem('kkhide', hide.value)
}

const hideCrxHandle = (value) => {
  hide.value = value
  setItem('kkhide', value)
  if (value) {
    const element = document.querySelector('.kk-auto-container');
    element? element.style.display = 'none' : null;
  }
}
</script>

<template>
  <main id="kk-auto-container" class="kk-auto-container" :class="{ kkhide: hide }">
    <div class="kk-sub-container">
      <div class="zhedie" id="zhedie">
        <n-icon size="30">
          <svg
            t="1731247997097"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1551"
            width="200"
            height="200"
          >
            <path
              d="M128 128m64 0l640 0q64 0 64 64l0 640q0 64-64 64l-640 0q-64 0-64-64l0-640q0-64 64-64Z"
              fill="#FFB22F"
              p-id="1552"
            ></path>
            <path
              d="M362.666667 640h-97.834667c-18.986667 0-28.522667 22.976-15.082667 36.416l97.834667 97.834667c13.44 13.44 36.416 3.925333 36.416-15.082667V661.333333a21.333333 21.333333 0 0 0-21.333333-21.333333zM640 661.333333v97.834667c0 18.986667 22.976 28.522667 36.416 15.082667l97.834667-97.834667c13.44-13.44 3.925333-36.416-15.082667-36.416H661.333333a21.333333 21.333333 0 0 0-21.333333 21.333333zM661.333333 384h97.834667c18.986667 0 28.522667-22.976 15.082667-36.416l-97.834667-97.834667c-13.44-13.44-36.416-3.925333-36.416 15.082667V362.666667a21.333333 21.333333 0 0 0 21.333333 21.333333zM384 362.666667v-97.834667c0-18.986667-22.976-28.522667-36.416-15.082667l-97.834667 97.834667c-13.44 13.44-3.925333 36.416 15.082667 36.416H362.666667a21.333333 21.333333 0 0 0 21.333333-21.333333z"
              fill="#333333"
              p-id="1553"
            ></path>
          </svg>
        </n-icon>
      </div>
      <div class="kk-yin" id="kk-yin" @click="hideHandle">
        <n-icon size="25">
          <svg
            t="1731252214529"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11387"
            width="200"
            height="200"
          >
            <path
              d="M0 0m113.777778 0l796.444444 0q113.777778 0 113.777778 113.777778l0 796.444444q0 113.777778-113.777778 113.777778l-796.444444 0q-113.777778 0-113.777778-113.777778l0-796.444444q0-113.777778 113.777778-113.777778Z"
              fill="#FED8D9"
              p-id="11388"
            ></path>
            <path
              d="M784.156444 614.4V354.816h-106.837333c19.057778-23.381333 38.798222-51.2 57.799111-82.602667v-50.517333H570.595556c5.859556-13.141333 11.719111-26.282667 16.839111-40.220444l-68.778667-8.760889C494.478222 237.738667 447.715556 292.636444 378.197333 337.237333l40.96 53.361778 19.740445-13.880889v38.798222h277.959111v40.96H427.918222v58.481778h288.938667v40.220445H411.818667v59.278222h372.337777zM534.698667 280.974222h123.619555c-19.000889 27.761778-37.319111 52.679111-55.580444 73.841778H466.716444c25.6-21.902222 48.241778-46.762667 67.982223-73.841778zM182.897778 200.476444v650.922667h67.299555V265.557333h85.560889c-16.839111 59.221333-40.220444 125.781333-69.461333 198.940445 38.001778 61.44 57.742222 116.280889 57.742222 166.058666 0 12.401778-2.161778 21.162667-5.802667 26.282667-4.437333 5.859556-12.458667 8.817778-24.177777 10.24-10.24 0-22.641778-1.422222-37.262223-4.380444l22.641778 70.940444c43.918222-0.682667 75.320889-10.24 93.639111-29.240889 11.719111-15.36 18.261333-40.220444 18.261334-73.841778-2.901333-50.517333-21.902222-108.999111-57.059556-176.298666a3889.152 3889.152 0 0 0 69.518222-198.940445v-54.840889H182.897778z m596.138666 434.460445l-59.278222 19.000889c23.438222 43.861333 44.600889 95.061333 63.658667 153.6l57.742222-26.339556a1156.664889 1156.664889 0 0 0-62.122667-146.261333z m-361.358222 16.099555a489.415111 489.415111 0 0 1-55.580444 138.922667l57.799111 36.579556c24.860444-45.340444 43.861333-100.181333 57.742222-163.100445l-59.960889-12.401778z m251.619556 193.820445c21.959111 0 38.741333-5.12 50.460444-13.937778 11.719111-10.24 20.48-40.96 24.860445-91.420444l-59.221334-19.740445-1.820444 20.821334c-1.934222 18.602667-4.380444 30.378667-7.68 34.759111a24.689778 24.689778 0 0 1-18.318222 7.338666h-72.419556c-15.36 0-22.641778-10.24-22.641778-30.72v-107.52H498.858667v121.400889c0 52.679111 21.959111 79.018667 66.56 79.018667h103.879111z m-38.058667-220.899556c26.339556 30.72 46.08 57.059556 60.017778 80.440889l-51.2 35.100445a687.786667 687.786667 0 0 0-58.538667-84.081778l49.720889-31.459556z"
              fill="#FD7F83"
              p-id="11389"
            ></path>
          </svg>
        </n-icon>
      </div>
    </div>
      <component :is="page.component" @hideCrx="hideCrxHandle"></component>
  </main>
</template>


<style>
.kk-auto-container {
  position: fixed;
  z-index: 9999;
  background-color: aliceblue;
  right: 0;
  top: 0;
  max-width: 320px;
  transition:
    width 0.5s,
    min-width 0.5s,
    height 0.5s;
}
.kkhide {
  overflow: hidden;
  width: 77px;
  height: 40px;
  min-width: 40px;
}
.kk-sub-container {
  position: relative;
  width: 100%;
}
.zhedie {
  position: absolute;
  left: 6px;
  top: 4px;
  cursor: move;
}
.kk-yin {
  position: absolute;
  left: 40px;
  top: 6px;
  cursor: pointer;
}
.v-binder-follower-container {
  z-index: 99999 !important;
}
.n-form-item-feedback-wrapper {
  min-height: 10px;
}
.kk-index {
  padding: 10px 25px;
}
.n-form-item-feedback-wrapper {
  min-height: 10px !important;
}
.kk-h3 {
  color: #42b983;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  margin-bottom: 7px;
  margin-top: 5px;
  font-size: 16px;
  user-select: none;
  border-bottom: 1px solid lightblue;
}
</style>
